<html>

<head>
    <meta charset="UTF-8">
    <title>动态添加和删除节点</title>
    <style type="text/css">
        .myArea {
            width: 100%;
            height: 80px;
        }

        .myDiv {
            line-height: 30px;
        }
    </style>

</head>

<body>
    <h2>工作经历</h2>
    <hr />
    <div id="myContainer">
        <div class="myDiv" id="div1">
            公司名称:<input type="text" />
            职位:<input type="text" />
            <a href="#" onclick="del()">删除工作经历</a>
            <br />
            工作职责及工作内容描述:
            <textarea class="myArea"></textarea>
            <hr />
        </div>
    </div>

    <div style="line-height: 30px; text-align: right;">
        <a href="#" onclick="add()">添加工作经历</a>
    </div>
    <script>
        //获取div
        var div = document.querySelector("#myContainer");
        var divArr = document.querySelector("#myContainer").childNodes;
        var length = divArr.length;

        function add() {
            //获取内容
            var textArr = document.querySelectorAll("input");
            var text = textArr[0].value;
            var text1 = textArr[1].value;
            var text2 = document.querySelector(".myArea").value;
            //添加到div中
            var div = document.querySelector("#myContainer");
            var divMode = document.createElement("div");
            divMode.innerHTML = "公司名称:" + text + "<br/>" + "职位:" + text1 + "<br/>" + "工作职责及工作内容描述:" + text2 + "<br/><hr>";
            div.appendChild(divMode);
            //清空表单
            textArr[0].value = ""; textArr[1].value = ""; document.querySelector(".myArea").value = "";
            length++;

        }
        function del() {
            if (length >= 3) {
                div.removeChild(divArr[--length]);
            }


        }
    </script>
</body>

</html>